<template>
    <div class="goods-params">
        <h3>3、商品参数：</h3>
        <el-button type="primary" @click="addParams" >添加商品</el-button>
        <el-table
                :data="params"
                style="width: 100%"
                >
            <el-table-column
                    prop="title"
                    label="日期"
                    width="300">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="delParams(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <goods-params-items @sendParams="sendParams" v-show="isAdd" class="params-item" @close="close" :scope="scopes"/>
        <shade v-show="isAdd"></shade>
        <div class="btn">
            <el-button type="primary" @click="previous">上一步</el-button>
            <el-button type="primary" @click="sendAllParams">下一步</el-button>
        </div>
    </div>
</template>

<script>
    import GoodsParamsItems from "./GoodsParamsItems";
    import Shade from "../../../../common/shade/Shade";
    export default {
        name: "GoodsParams",
        props: {
            params: {
                type: Array,
                default: []
            },
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                isAdd: false,
                scopes: null,
                delGoodsParamsUrl: [],
            }
        },
        components: {
            GoodsParamsItems,
            Shade
        },
        methods: {
            addParams() {
                this.isAdd = true
            },
            sendParams(value) {
                if (this.isEdit) {
                   // this.changeParams.push(value)
                    value.isEdit = true;
                    this.params.push(value);
                } else {
                    this.params.push(value);
                }

            },
            sendAllParams() {
                if (this.params.length === 0) {
                    alert("请至少上传一组商品参数")
                    return
                } else {
                    this.$emit('sendAllParams')
                }

            },
            previous() {
              this.$emit('previous')
            },
            close() {
                this.isAdd = false;
            },
            delParams(scope) {
                this.params.splice(scope.$index, 1);
                if (this.isEdit) {
                    this.delGoodsParamsUrl.push(scope.row.url)
                }
                console.log(scope);
                console.log(1);
            }
        },

    }
</script>

<style scoped>
    .goods-params {
    }
    .btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -89px;
    }
    .params-item {
        position: absolute;
        width: 500px;
        height: 400px;
        top: 20%;
        z-index: 9;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 1px 1px #b0b0b0;
    }
</style>